<template>
    <div id="OrderDetails">
       <el-button type="primary" class="goback" @click="goback">返回上一级</el-button>
        <el-button type="primary" class="goback" @click="productDetails">查看商品详情</el-button>
        <div class="table" v-loading="loading">
            <h3 class="title">工单详情</h3>
            <div v-for="(item,key) in tabData" :key="key" >
                <div class="tab-item" v-if="item.value">
                    <div class="tab-name">{{list[item.name]}}：</div>
                    <div class="tab-val" v-if="list[item.name]== '实物拍照'">
                        <a v-for="(val,idx) in imgArr" :key="idx" :href="val" target="_blank">
                            <img :src="val" alt="" style="width:150px;height:150px;margin-right:10px;margin-bottom:10px;" title="点击查看大图">
                        </a>
                    </div>
                    <div class="tab-val" v-else-if="list[item.name]== '用户上传图片地址'">
                        <a v-for="(val,idx) in item.value" :key="idx" :href="val" target="_blank" class="targetBox">
                            <img :src="val.pictureUrl" alt="" style="width:150px;height:150px;margin-right:10px;margin-bottom:10px;" title="点击查看大图">
                            <span>{{val.cpeoName}}</span>
                        </a>
                    </div>
                    <div class="tab-val" v-else-if="list[item.name]== '商品图片'">
                        <a :href="item.value" target="_blank" class="targetBox">
                            <img :src="item.value" alt="" style="width:150px;height:150px;margin-right:10px;margin-bottom:10px;" title="点击查看大图">
                        </a>
                    </div>
                    <div class="tab-val" v-else-if="list[item.name]== '评估师头像'">

                        <a :href="item.value" target="_blank" class="targetBox">

                            <img :src="item.value" alt="" style="width:150px;height:150px;margin-right:10px;margin-bottom:10px;" title="点击查看大图">
                        </a>
                    </div>
                    <div class="tab-val" v-else-if="list[item.name]== '评估师拍照'">

                        <a :href="item.value" target="_blank" class="targetBox">

                            <img :src="item.value" alt="" style="width:150px;height:150px;margin-right:10px;margin-bottom:10px;" title="点击查看大图">
                        </a>
                    </div>
                    <div class="tab-val" v-else-if="list[item.name]== '用户头像'">

                        <a :href="item.value" target="_blank" class="targetBox">

                            <img :src="item.value" alt="" style="width:150px;height:150px;margin-right:10px;margin-bottom:10px;" title="点击查看大图">
                        </a>
                    </div>
                    <span class="tab-val" v-else>{{item.value}}</span>
                </div>

            </div>
            <div v-if="isshow">
                暂无数据
            </div>
        </div>



    </div>
</template>

<script>
    import {
        getscpXQ,getWorkOrderDetail
    } from "@/api/appraiserAdmin/appraiserAdmin";
    import Data from './orderDetails.js'
    import dialogVue from '@/components/dialog.vue'
    import tableVue from '@/components/alltable.vue'
export default {
    components : {
        tableVue,
        dialogVue
    },
    data(){
        return JSON.parse(JSON.stringify(Data))
    },
    mounted(){
        if(this.$route.query.key=="luxuryWorkOrder"){
            getscpXQ(this.$route.query.id).then(res=>{ //获取工单详情数据
                if( !res.data.data|| res.data.data.length==0){
                    this.isshow = true;
                    return;
                }else{
                    this.isshow = false;
                }
                let lists = res.data.data[0];
                this.orderID = res.data.data[0].consignOrderId;
                // lists['gmtCreate'] = this.switchTime( lists['gmtCreate']);
                // lists['gmtUpdate'] = this.switchTime(lists['gmtUpdate']);
                // lists['dispatchTime'] = this.switchTime(lists['dispatchTime'] );
                // lists['completeTime'] = this.switchTime(lists['completeTime']);
                // this.imgArr=lists.productPicture.split(',');
                lists.orderCreateTime = this.switchTime(lists.orderCreateTime);
                lists.dispatchTime = this.switchTime(lists.dispatchTime)
                lists.completeTime = this.switchTime(lists.completeTime)

                if(lists['workerOrderStatus']){
                     switch(lists['workerOrderStatus']){
                        case "VIST":
                            lists['workerOrderStatus'] = "待上门";
                            break
                        case "WAIT":
                            lists['workerOrderStatus'] = "待处理";
                            break
                        case "COMPLETE":
                            lists['workerOrderStatus'] = "评估完成";
                            break
                        case "SEND":
                            lists['workerOrderStatus'] = "待发货";
                            break
                        case "SHIPPED":
                            lists['workerOrderStatus'] = "已发货";
                            break
                        case "RETURNED":
                            lists['workerOrderStatus'] = "待退货";
                            break
                        case "BACK":
                            lists['workerOrderStatus'] = "发退货";
                            break
                        case "STORAGE":
                            lists['workerOrderStatus'] = "待入库";
                            break
                        case "ESTIMATE":
                            lists['workerOrderStatus'] = "图片评估完成";
                            break
                        case "CANCAL":
                            lists['workerOrderStatus'] = "已取消";
                            break
                        case "FINISH":
                            lists['workerOrderStatus'] = "已完成";
                            break
                        default:
                            break;
                }
                }

                if(lists.notifyResult){
                    switch(lists.notifyResult){
                        case "SUCCESS":
                            lists.notifyResult = "成功";
                            break;
                        case "FAILED":
                            lists.notifyResult = "失败";
                            break;
                        case "NOT_NOTIFY":
                            lists.notifyResult = "未通知";
                            break;
                        default:
                            break;
			        }

                }

            for (let item in lists){
                let obj ={};
                obj.name = item
                obj.value = lists[item];
                this.tabData.push(obj);
            }
            this.loading =false;

        })
        }else{

             getWorkOrderDetail(this.$route.query.id).then(res=>{ //获取工单详情数据
                             console.log(res);
                if(!res.data.data ||res.data.data.length==0){
                   this.isshow = true;
                    return;
                }else{
                    this.isshow = false;
                }
                res.data.data['gmtCreate'] = this.switchTime( res.data.data['gmtCreate']);
                res.data.data['gmtUpdate'] = this.switchTime(res.data.data['gmtUpdate']);
                res.data.data['dispatchTime'] = this.switchTime(res.data.data['dispatchTime'] );
                res.data.data['completeTime'] = this.switchTime(res.data.data['completeTime']);
                this.orderID = res.data.data.consignOrderId;
                this.imgArr=res.data.data.productPicture.split(',');
                switch(res.data.data['workerOrderStatus']){
                        case "VIST":
                            res.data.data['workerOrderStatus'] = "待上门";
                            break
                        case "WAIT":
                            res.data.data['workerOrderStatus'] = "待处理";
                            break
                        case "COMPLETE":
                            res.data.data['workerOrderStatus'] = "评估完成";
                            break
                        case "SEND":
                            res.data.data['workerOrderStatus'] = "待发货";
                            break
                        case "SHIPPED":
                            res.data.data['workerOrderStatus'] = "已发货";
                            break
                        case "RETURNED":
                            res.data.data['workerOrderStatus'] = "待退货";
                            break
                        case "BACK":
                            res.data.data['workerOrderStatus'] = "发退货";
                            break
                        case "STORAGE":
                            res.data.data['workerOrderStatus'] = "待入库";
                            break
                        case "ESTIMATE":
                            res.data.data['workerOrderStatus'] = "图片评估完成";
                            break
                        case "CANCAL":
                            res.data.data['workerOrderStatus'] = "已取消";
                            break
                        case "FINISH":
                            res.data.data['workerOrderStatus'] = "已完成";
                            break
                        default:
                            break;
                }
                switch(res.data.data.notifyResult){
				case "SUCCESS":
				  	res.data.data.notifyResult = "成功";
					break;
				case "FAILED":
					res.data.data.notifyResult = "失败";
					break;
				case "NOT_NOTIFY":
					res.data.data.notifyResult = "未通知";
					break;
				default:
					break;
			  }

            for (let item in res.data.data){
                let obj ={};
                obj.name = item
                obj.value = res.data.data[item];
                this.tabData.push(obj);
            }
            this.loading =false;

        })
        }

    },
    methods:{
      productDetails () {
        this.$router.push({
          name : 'details',
          query : {
            id  :   this.orderID,
            num : 1,
            workid : this.$route.query.id,
            key : this.$route.query.key
          }
        })
      },
        goback(){ //返回上一级
            switch(this.$route.query.key){
                case "myOrder":
                    this.$router.push(
                        {path:"/appraiser/myorder"}
                    )
                    break;
                case "workOrder":
                    this.$router.push(
                        {path:"/appraiser/expressageMenu/expressageWorkOrder"}
                    )
                    break;
                case "luxuryWorkOrder":
                    this.$router.push(
                        {path:"/appraiser/luxuryMenu/luxuryWorkOrder"}
                    )
                    break;
                case "luxuryOrderForm":
                    this.$router.push(
                        {path:"/appraiser/luxuryMenu/luxuryOrderForm"}
                    )
                    break;
                default:
                    break;
            }
        }
    }
}
</script>
<style scoped lang="css">
    #OrderDetails{
        width:100%;
        height: 100%;
    }
    .title{
        width: 100%;
        text-align: center;

    }
    .goback{
        margin-top: 15px;
    }
    .table{
        width:800px;
        border: 1px solid #ccc;
        background-color: #fff;
        margin-top: 20px;

    }
    /* .tab-item:last-child{
        border-bottom: 1px solid #ccc;
    } */
    .tab-val{
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        border-left: 1px solid #ccc;
        box-sizing: border-box;
          min-height: 60px;
        align-items: center;
        padding-top:10px;

    }
    .tab-item{
        width: 100%;
        display: flex;
        padding:0 10px;
        box-sizing: border-box;
         border-top: 1px solid #ccc;
        min-height: 60px;
        align-items: center;
    }
    .tab-item .tab-name{
        min-width: 150px;
        min-height: 60px;

        display: flex;
        align-items: center;
    }
    .targetBox{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
